<template>
<div class="box">
  <div class="column">
    <div class="item1"><span>雨量：{{tableData.rainfull}} mm</span></div>
    <div class="item1"><span>滑坡概率：{{tableData.probabilityOfLandslide}} %</span></div>
    <div class="item1"><span>总注液量：{{tableData.totalInjectionVolume}} L</span></div>
    </div>
  <div class="column">
    <div class="item2"><span>倾 斜 角：{{tableData.totalInjectionVolume}} °</span></div>
    <div class="item2">
          <el-progress 
          :percentage="tableData.probabilityOfLandslide" 
          :stroke-width="24" 
          :text-inside="true" 
          :color="customColorMethod"/>
    </div>
     
  </div>
</div>
    <!-- <div class="box" >
      <el-row :gutter="30" class="probabilityOfLandslide">
        <el-col :span="10">
          <span>山体滑坡：{{probabilityOfLandslide}} %</span>
        </el-col>
        
      </el-row>
      <el-row>
          <el-col :span="10">
          <span>雨量：{{tableData.rainfull}} mm</span>
        </el-col>
      </el-row>
      <el-row class="rainfull">
        <el-col :span="10">
          <span>总注液量：{{tableData.totalInjectionVolume}} L</span>
        </el-col>
      </el-row>
         <el-row class="rainfull">
        <el-col :span="10">
          <span>倾斜 角：{{tableData.totalInjectionVolume}} °</span>
        </el-col>
      </el-row>
      </div> -->
</template>
<script>
export default {
  name: 'record',
  data () {
    return {
      probabilityOfLandslide: '',
      tableData: {
        probabilityOfLandslide: '60',
        totalInjectionVolume: '66',
        airHumidity: '30',
        airTemperature: '20',
        soilTemperature: '30',
        soilHumidity: '20',
        rainfull: '200'
      },
    }
  },

    methods: {
    customColorMethod(percentage) {
        if (percentage < 30) {
          return '#67c23a';
        } else if (percentage < 70) {
          return '#e6a23c';
        } else {
          return '#a61b29';
        }
      },
  }
    }
</script>
<style lang="scss" scoped>
.box{
  display: flex;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;
}
.column{
  margin: 0 auto;
  top: 10vh;
  flex: 3;
}
.item1{
  // text-align: center;
  padding-left: 50px;
  line-height: 40px;
  height: 40px;
  margin: 0 auto;
  color: #0fff00;
}
.item2{
  // margin: 0 auto;
  color: #0fff00;
}
.el-progress{
  margin-top: 4vh;
}

</style>

